<template>
  <div class="body">
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-row type="flex" justify="center" class="deep">
      <van-col span="20">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <p class="reg" @click="goRegist">没有账户请点击注册</p>
        <van-button color="#f50a00" block @click="login">登录</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "Login",

  data() {
    return {
      username: "",
      password: "",
      user_img: "",
      userinfo: {},
      showname: false,
    };
  },

  mounted() {},

  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    goRegist() {
      this.$router.push("/Regist");
    },
    login() {
      this.$axios.get("/users?username=" + this.username).then((res) => {
        if (res.data.length == 0) {
          this.$dialog({ message: "没有该用户，请注册！" });
        } else {
          if (res.data[0].password != this.password) {
            this.$dialog({ message: "输入密码有误，请检查！" });
          } else {
            let user = {
              username: res.data[0].username,
              password: res.data[0].password,
              user_img: res.data[0].user_img,
              address: res.data[0].address,
              tel: res.data[0].tel,
            };

            this.$axios
              .post("/user", user)
              .then((res) => {
                this.$toast(user.username + "登陆成功");
              })
              .catch((err) => {
                console.log(err);
              });
            this.$router.push("/");
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.deep /deep/ .van-button {
  border-radius: 45px;
}
</style>